<template>
  <div class="CommonTips" v-if="isShow">
    <div class="overlay" @click="handleClick">
      <view class="wrapper">
        <div class="block">
          <div class="type">
            <i class="finish-icon iconfont iconyes"></i>
          </div>
          <div class="title">
            {{ data.title }}
          </div>
        </div>
      </view>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false,
      data: {
        type: '',
        title: '',
        time: 3000,
      },
    }
  },
  methods: {
    $show (data) {
      this.data = data
      this.isShow = true
      this.timer = setTimeout(() => {
        this.isShow = false
      }, data.time || 3000)
    },
    handleClick () {
      this.isShow = false
      clearTimeout(this.timer)
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.CommonTips {
	.overlay {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 999;
		background: rgba(0, 0, 0, .2);

		.wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;

			.block {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				min-width: 225px;
				max-width: 95vw;
				min-height: 37px;
				padding: 8px 12px;
				border-radius: 4px;
				background: #f9f9f9;

				.title {
					margin-left: 13px;
				}

				.type {
					.finish-icon {
						color: #00a854;
					}
				}
			}
		}
	}
}
</style>
